<!DOCTYPE HTML>
<html lang="zh" >
<meta charset="utf-8">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="shortcut icon" href="favicon.ico">
	<link href="libs/bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
	<!-- bootstrap-table 表格插件样式 -->
	<link href="libs/bootstrap-table/bootstrap-table.css" rel="stylesheet"/>
	<link href="libs/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
	<!-- 
	<script src="libs/jquery/jquery-1.9.1.js"></script>
	 -->
	<script src="libs/jquery/jquery-1.8.2.min.js"></script>
	<!-- bootstrap-table 表格插件 -->
	<script src="libs/bootstrap-table/bootstrap-table.js"></script>
	
	
	
	<script src="libs/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
	
	<script src="libs/bootstrap/js/bootstrap.js"></script>
	<script src="libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
	<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
			<table id="bootstrap_table_parameter" data-mobile-responsive="true" style="white-space:nowrap;"></table>
<a href="#" id="username">superuser</a>
<script>
        $(function() {
		        var requiredDatas = [{"dictLabel":"√","dictValue":"1","listClass":"success"},
            {"dictLabel":"×","dictValue":"0","listClass":"default"}];
				$('#username').editable({
							   type:  'text',
							   pk:    1,
							   name:  'username',
							   url:   'post.html',  
							   title: 'Enter username'
                        });
		 $('#bootstrap_table_parameter').bootstrapTable({
				editable:true,//开启编辑模式 
                url: "1.json",
                contentType: "application/x-www-form-urlencoded",   // 编码类型
                method: 'post',                                     // 请求方式（*）
                cache: false,                                       // 是否使用缓存
                sortable: true,                                     // 是否启用排序
                sortStable: true,                                   // 设置为 true 将获得稳定的排序
                sortName: "apiParameterId",                                // 排序列名称
                sortOrder: "asc",                              // 排序方式  asc 或者 desc
                pagination: true,   // 是否显示分页（*）
                pageNumber: 1,                                      // 初始化加载第一页，默认第一页
                pageSize: 10,                                       // 每页的记录行数（*）
                pageList: [10, 25, 50],                             // 可供选择的每页的行数（*）
                iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
                toolbar: '#toolbar_parameter',                                // 指定工作栏
                sidePagination: "server",                           // 启用服务端分页
                search: false,           // 是否显示搜索框功能
                showRefresh: true, // 是否显示刷新按钮
                showColumns: true, // 是否显示隐藏某列下拉框
                showToggle: true,   // 是否显示详细视图和列表视图的切换按钮
                showExport: true,   // 是否支持导出文件
                // queryParams: $.table._params,                       // 传递参数（*）
                columns: [
				{
					field : 'apiParameterId',
					title : '请求参数ID'
				},
				{
					field : 'apiProjectnameId',
					title : '所属项目ID'
				},
				{
					field : 'parameter',
					title : '参数名称'
				},
				{
					field : 'description',
					title : '参数描述',
					editable: {
						url: 'post.html',
						type:"text",
						onblur: "submit",
						showbuttons: false,
						validate:function (value) {
								if ($.trim(value) == '') return 'value不能为空';
						},onEditableSave: function (field, row, oldValue, $el) {
							console.log("aaa")
							$.ajax({
										
									 //在bootstrap table中编辑完成后调用的方法

									//可以进行数据的保存工作
								  })
						}
					}
				},
				{
					field : 'defaultValue',
					title : '默认值'
				},
				{
					field : 'referenceValue',
					title : '参考值'
				},
				{
					field : 'valueType',
					title : '值类型',
                    align: 'center'
				},
				{
					field : 'required',
					title : '是否必填',
                    formatter: function(value, row, index) {
                        var actions = [];
                        $.each(requiredDatas, function(index, dict) {
                            if (dict.dictValue == value) {
                                actions.push("<span class='badge requiredData-" + dict.listClass + "'>" + dict.dictLabel + "</span>");
                                return false;
                            }
                        });
                        return actions.join('');
                    }
				},
				{
					field : 'createBy',
					title : '创建者'
				},
				{
					field : 'createTime',
					title : '创建时间'
				},
				{
					field : 'updateBy',
					title : '更新者'
				},
				{
					field : 'updateTime',
					title : '更新时间'
				},
				{
					field : 'remark',
					title : '备注'
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs " href="#" onclick="editParameter(\'' + row.apiParameterId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="#" onclick="removeParameter(\'' + row.apiParameterId + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }],onEditableSave: function (field, row, oldValue, $el) {
					  console.log("编辑完成成功后执行");
					  $table = $('#bootstrap_table_parameter').bootstrapTable({});
					  $table.bootstrapTable('updateRow', {index: row.rowId, row: row});

				}
					});
        });
           
</script>
<br>
http://vitalets.github.io/x-editable/demo.html
<br>
http://vitalets.github.io/x-editable/assets/demo.js
</body>